<template>
    <view class="comment-container">
        <!-- 评论头部 -->
        <view class="comment-header">
            <text class="comment-title">评论</text>
            <text class="comment-count">{{ commentList.length }}</text>
        </view>

        <!-- 评论列表 -->
        <scroll-view class="comment-list" scroll-y>
            <view v-for="(comment, index) in commentList" :key="comment.id" class="comment-item">
                <!-- 用户头像 -->
                <view class="user-avatar">
                    <image :src="comment.avatar || '/static/img/default-avatar.png'" mode="aspectFill" />
                </view>

                <!-- 评论内容区 -->
                <view class="comment-content">
                    <!-- 用户信息 -->
                    <view class="user-info">
                        <text class="username">{{ comment.username }}</text>
                        <text class="comment-time">{{ formatTime(comment.createTime) }}</text>
                    </view>

                    <!-- 评论文本 -->
                    <text class="comment-text">{{ comment.content }}</text>

                    <!-- 评论操作 -->
                    <view class="comment-actions">
                        <view class="action-item" @click="toggleLike(comment)">
                            <u-icon name="heart-fill" :size="30" :color="comment.isLiked ? 'red' : '#999'"></u-icon>
                            <text :class="['like-count', { active: comment.isLiked }]">
                                {{ comment.likeCount }}
                            </text>
                        </view>
                        <view class="action-item" @click="replyComment(comment)">
                            <u-icon name="chat" />
                            <text>回复</text>
                        </view>
                    </view>

                    <!-- 回复列表 -->
                    <view v-if="comment.replies && comment.replies.length > 0" class="reply-list">
                        <view v-for="reply in comment.replies" :key="reply.id" class="reply-item">
                            <text class="reply-username">{{ reply.username }}：</text>
                            <text class="reply-text">{{ reply.content }}</text>
                        </view>
                        <view v-if="comment.replyCount > 2" class="view-more-replies">
                            <text>查看全部{{ comment.replyCount }}条回复</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 空状态 -->
            <view v-if="commentList.length === 0" class="empty-state">
                <image src="/static/img/icon_comment_empty.png" mode="aspectFit" />
                <text>暂无评论，快来发表第一条评论吧</text>
            </view>
        </scroll-view>

        <!-- 底部评论输入框 -->
        <view class="comment-input-container">
            <input v-model="commentText" class="comment-input"
                :placeholder="replyingTo ? `回复 @${replyingTo.username}` : '发表你的评论...'" maxlength="200" />
            <button class="send-btn" :disabled="!commentText.trim()" @click="sendComment">
                发送
            </button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

interface CommentReply {
    id: string
    username: string
    content: string
    createTime: string
}

interface CommentItem {
    id: string
    username: string
    avatar: string
    content: string
    createTime: string
    likeCount: number
    isLiked: boolean
    replyCount: number
    replies?: CommentReply[]
}

// 响应式数据
const commentList = ref<CommentItem[]>([])
const commentText = ref('')
const replyingTo = ref<CommentItem | null>(null)

// 模拟评论数据
const mockComments: CommentItem[] = [
    {
        id: '1',
        username: '学习小达人',
        avatar: '/static/avatar3.png',
        content: '这个视频讲解得非常清楚，老师的教学方法很棒！学到了很多知识点，会继续关注的。',
        createTime: '2024-01-15 14:30:00',
        likeCount: 23,
        isLiked: false,
        replyCount: 2,
        replies: [
            {
                id: '1-1',
                username: '小明同学',
                content: '同感，讲得很详细',
                createTime: '2024-01-15 15:00:00'
            },
            {
                id: '1-2',
                username: '学霸君',
                content: '确实不错，推荐给大家',
                createTime: '2024-01-15 15:30:00'
            }
        ]
    },
    {
        id: '2',
        username: '努力学习的猫',
        avatar: '/static/avatar2.png',
        content: '请问有相关的练习题吗？想要巩固一下学到的知识。',
        createTime: '2024-01-15 16:45:00',
        likeCount: 8,
        isLiked: true,
        replyCount: 0
    },
    {
        id: '3',
        username: '知识追求者',
        avatar: '/static/avatar1.png',
        content: '老师讲得很生动，复杂的概念都能用简单的例子解释清楚，非常推荐！',
        createTime: '2024-01-15 18:20:00',
        likeCount: 15,
        isLiked: false,
        replyCount: 1,
        replies: [
            {
                id: '3-1',
                username: '学习小达人',
                content: '是的，老师很厉害',
                createTime: '2024-01-15 19:00:00'
            }
        ]
    }
]

// 格式化时间
const formatTime = (timeStr: string): string => {
    const date = new Date(timeStr)
    const now = new Date()
    const diff = now.getTime() - date.getTime()

    const minutes = Math.floor(diff / (1000 * 60))
    const hours = Math.floor(diff / (1000 * 60 * 60))
    const days = Math.floor(diff / (1000 * 60 * 60 * 24))

    if (minutes < 1) return '刚刚'
    if (minutes < 60) return `${minutes}分钟前`
    if (hours < 24) return `${hours}小时前`
    if (days < 7) return `${days}天前`

    return timeStr.split(' ')[0]
}

// 切换点赞状态
const toggleLike = (comment: CommentItem) => {
    comment.isLiked = !comment.isLiked
    comment.likeCount += comment.isLiked ? 1 : -1
}

// 回复评论
const replyComment = (comment: CommentItem) => {
    replyingTo.value = comment
}

// 发送评论
const sendComment = () => {
    if (!commentText.value.trim()) return

    const newComment: CommentItem = {
        id: Date.now().toString(),
        username: '当前用户',
        avatar: '/static/img/current-user-avatar.png',
        content: commentText.value.trim(),
        createTime: new Date().toISOString(),
        likeCount: 0,
        isLiked: false,
        replyCount: 0
    }

    if (replyingTo.value) {
        // 回复评论的逻辑
        console.log('回复评论:', replyingTo.value.username, commentText.value)
        replyingTo.value = null
    } else {
        // 发表新评论
        commentList.value.unshift(newComment)
    }

    commentText.value = ''
}

// 页面加载时获取评论数据
onMounted(() => {
    // 这里可以调用API获取真实评论数据
    commentList.value = mockComments
})
</script>

<style lang="scss" scoped>
.comment-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #f8f9fa;
}

.comment-header {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;

    .comment-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    .comment-count {
        margin-left: 10rpx;
        font-size: 28rpx;
        color: #999;
    }
}

.comment-list {
    flex: 1;
    height: calc(100% - 200rpx);
    // padding: 0 30rpx;
    background-color: #fff;
}

.comment-item {
    display: flex;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
        border-bottom: none;
    }
}

.user-avatar {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;

    image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
}

.comment-content {
    flex: 1;
    min-width: 0;
}

.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;

    .username {
        font-size: 28rpx;
        font-weight: 800;
        color: #333;
    }

    .comment-time {
        margin-left: 20rpx;
        font-size: 24rpx;
        color: #999;
    }
}

.comment-text {
    display: block;
    font-size: 30rpx;
    color: #333;
    line-height: 1.5;
    margin-bottom: 20rpx;
}

.comment-actions {
    display: flex;
    align-items: center;

    .action-item {
        display: flex;
        align-items: center;
        margin-right: 40rpx;
        cursor: pointer;

        image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 8rpx;
        }

        text {
            font-size: 26rpx;
            color: #666;

            &.like-count.active {
                color: #ff6b6b;
            }
        }
    }
}

.reply-list {
    margin-top: 20rpx;
    padding: 20rpx;
    background-color: #f8f9fa;
    border-radius: 12rpx;

    .reply-item {
        margin-bottom: 10rpx;
        font-size: 28rpx;
        line-height: 1.4;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .reply-username {
        color: #576b95;
    }

    .reply-text {
        color: #333;
    }

    .view-more-replies {
        margin-top: 15rpx;
        font-size: 26rpx;
        color: #576b95;
    }
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;

    image {
        width: 120rpx;
        height: 120rpx;
        margin-bottom: 20rpx;
    }

    text {
        font-size: 28rpx;
        color: #999;
    }
}

.comment-input-container {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: #fff;
    border-top: 1rpx solid #eee;

    .comment-input {
        flex: 1;
        height: 70rpx;
        padding: 0 20rpx;
        background-color: #f5f5f5;
        border-radius: 35rpx;
        font-size: 28rpx;
        border: none;
        outline: none;
    }

    .send-btn {
        margin-left: 20rpx;
        padding: 0 30rpx;
        height: 70rpx;
        background-color: #576b95;
        color: #fff;
        border-radius: 35rpx;
        font-size: 28rpx;
        border: none;

        &:disabled {
            background-color: #ccc;
        }
    }
}
</style>